<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
	<tc_include file="Public:head" />
	<tc_include file="Public:scripts" />
</head>
<body>
<!--start-banner-->
<?php
$home_slides=sp_getslide("portal_index");
?>
	<div class="banner" id="home">
		<tc_include file="Public:nav" />
			<div class="banner-main">
				<div class="container">
					<div class="banner-top">
						<h1></h1>
						<div class="banner-top-btm">
							<div class="col-md-6 bnr-left">
								<img src="__TMPL__Public/assets/images/icn-1.png" alt="" />
							</div>
							<div class="col-md-6 bnr-right">
								<img src="__TMPL__Public/assets/images/icn-2.png" alt="" />
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
					<div class="banner-bottom">
						<div class="banner-slide">
						<div  id="top" class="callbacks_container">
			      			<ul class="rslides" id="slider4">
								<foreach name="home_slides" item="vo">
				        	<li>
								<img src="{:sp_get_asset_upload_path($vo['slide_pic'])}" alt="" />
							</li>
								</foreach>
			      			</ul>
			    </div>
			  <div class="clearfix"> </div>
			  </div>
				</div>
				</div>
			</div>
		</div>
	<!-- script-for-menu -->
		 <!-- script-for-menu -->
		  <!--Slider-Starts-Here-->

			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: false,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });

			    });
			  </script>
			<!--End-slider-script-->
	<!--end-banner-->
	<!--start-idea-->
	<div class="idea">
		<div class="container">
			<div class="idea-main">
				<div class="idea-top">
					<div class="col-md-5 idea-left id-left">
						<img src="__TMPL__Public/assets/images/idea-1.png" alt="" />
					</div>
					<div class="col-md-7 idea-right id-right">
						<h3>企业文化<small>Corporate Culture</small></h3>
						<p style="text-indent: 2em;">公司取名鼎溢，“鼎”字意喻稳重、信誉极高，“溢”字意喻多而满，希望公司拥有极高的信誉度和美誉度，与客户达到双赢。</p>
						<div class="i-btn">
							<a href="{:U('index/about_us')}">详&nbsp;&nbsp;&nbsp;&nbsp;情</a>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="idea-top">
					<div class="col-md-7 idea-right id-one-left">
						<h3>公司概况<small>Company Overview</small></h3>
						<p style="text-indent: 2em;">为顾客提供安全可靠的支付平台，拉进商家与消费者的距离，各小商铺力挺鼎溢运营。</p>
						<p style="text-indent: 2em;">为宠物主人提供交流的平台，让宠物找到家的感觉~~</p>
						<p style="text-indent: 2em;">用心和专业让我们的服务无止尽。</p>
						<div class="i-btn">
							<a href="{:U('index/services')}">更&nbsp;&nbsp;&nbsp;&nbsp;多</a>
						</div>
					</div>
					<div class="col-md-5 idea-left id-one-right">
						<img src="__TMPL__Public/assets/images/idea-2.png" alt="" />
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!--end-idea-->
	<!--start-number-->
	<!--<div class="number">-->
		<!--<div class="container">-->
			<!--<div class="number-main">-->
				<!--<h3>Conquering web from 2009 and these are our stats ... so far ;)</h3>-->
			<!--</div>-->
			<!--<div class="number-bottom">-->
				<!--<ul>-->
					<!--<li>-->
						<!--<h4>186</h4>-->
						<!--<p>satisfied clients</p>-->
					<!--</li>-->
					<!--<li>-->
						<!--<span class="one"><img src="__TMPL__Public/assets/images/clk.png" alt="" /></span>-->
						<!--<h4>657</h4>-->
						<!--<p>completed projects</p>-->
					<!--</li>-->
					<!--<li>-->
						<!--<span class="two"><img src="__TMPL__Public/assets/images/clk.png" alt="" /></span>-->
						<!--<h4>1,340</h4>-->
						<!--<p>coffees drinked</p>-->
					<!--</li>-->
					<!--<li>-->
						<!--<span class="tre"><img src="__TMPL__Public/assets/images/clk.png" alt="" /></span>-->
						<!--<h4>652</h4>-->
						<!--<p>hours played battlefield 3</p>-->
					<!--</li>-->
				<!--</ul>-->
			<!--</div>-->
		<!--</div>-->
	<!--</div>-->
	<!--end-number-->
	<!--start-partner-->
	<!--<div class="partner">-->
		<!--&lt;!&ndash;<div class="container">&ndash;&gt;-->
			<!--&lt;!&ndash;<div class="partner-top">&ndash;&gt;-->
				<!--&lt;!&ndash;<h3>OUR WONDERFUL PARTNERS</h3>&ndash;&gt;-->
				<!--&lt;!&ndash;<p>Move over logo to see testimonial</p>&ndash;&gt;-->
			<!--&lt;!&ndash;</div>&ndash;&gt;-->
			<!--&lt;!&ndash;<div class="partner-bottom">&ndash;&gt;-->
				<!--&lt;!&ndash;<div  id="top" class="callbacks_container">&ndash;&gt;-->
					<!--&lt;!&ndash;<ul class="rslides" id="slider5">&ndash;&gt;-->
						<!--&lt;!&ndash;<li>&ndash;&gt;-->
							<!--&lt;!&ndash;<div class="part-one">&ndash;&gt;-->
								<!--&lt;!&ndash;<foreach name="partners" item="vo">&ndash;&gt;-->
									<!--&lt;!&ndash;<if condition="($vo['type'] eq 1)">&ndash;&gt;-->
										<!--&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;-->
											<!--&lt;!&ndash;<img src="{:sp_get_image_preview_url($vo['img'])}" alt="" />&ndash;&gt;-->
											<!--&lt;!&ndash;<div class="part">&ndash;&gt;-->
												<!--&lt;!&ndash;{$vo.text}&ndash;&gt;-->
												<!--&lt;!&ndash;<label>{$vo.title}</label>&ndash;&gt;-->
											<!--&lt;!&ndash;</div>&ndash;&gt;-->
										<!--&lt;!&ndash;</div>&ndash;&gt;-->
									<!--&lt;!&ndash;</if>&ndash;&gt;-->
								<!--&lt;!&ndash;</foreach>&ndash;&gt;-->
									<!--&lt;!&ndash;<div class="clearfix"></div>&ndash;&gt;-->
							<!--&lt;!&ndash;</div>&ndash;&gt;-->
						<!--&lt;!&ndash;</li>&ndash;&gt;-->
						<!--&lt;!&ndash;<li>&ndash;&gt;-->
							<!--&lt;!&ndash;<div class="part-one">&ndash;&gt;-->
								<!--&lt;!&ndash;<foreach name="partners" item="vo">&ndash;&gt;-->
									<!--&lt;!&ndash;<if condition="($vo['type'] eq 2)">&ndash;&gt;-->
										<!--&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;-->
											<!--&lt;!&ndash;<img src="{:sp_get_image_preview_url($vo['img'])}" alt="" />&ndash;&gt;-->
											<!--&lt;!&ndash;<div class="part">&ndash;&gt;-->
												<!--&lt;!&ndash;{$vo.text}&ndash;&gt;-->
												<!--&lt;!&ndash;<label>{$vo.title}</label>&ndash;&gt;-->
											<!--&lt;!&ndash;</div>&ndash;&gt;-->
										<!--&lt;!&ndash;</div>&ndash;&gt;-->
									<!--&lt;!&ndash;</if>&ndash;&gt;-->
								<!--&lt;!&ndash;</foreach>&ndash;&gt;-->
							<!--&lt;!&ndash;</div>&ndash;&gt;-->
						<!--&lt;!&ndash;</li>&ndash;&gt;-->
						<!--&lt;!&ndash;&lt;!&ndash;<li>&ndash;&gt;&ndash;&gt;-->
							<!--&lt;!&ndash;&lt;!&ndash;<div class="part-one">&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-1.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-2.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-3.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-4.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-5.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-6.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="clearfix"></div>&ndash;&gt;&ndash;&gt;-->
							<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
						<!--&lt;!&ndash;&lt;!&ndash;</li>&ndash;&gt;&ndash;&gt;-->
						<!--&lt;!&ndash;&lt;!&ndash;<li>&ndash;&gt;&ndash;&gt;-->
							<!--&lt;!&ndash;&lt;!&ndash;<div class="part-one">&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-2.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-3.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-1.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-5.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-6.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="col-md-4 partner-left">&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<img src="__TMPL__Public/assets/images/prt-4.png" alt="" />&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;<div class="part">&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<p>“Lorem ipsum dolor sit amet, consec-tetur adipiscing elit. Nunc sollicitudin a risus vel molestie. Nullam vitae sollicitudin eros. Cras eu venenatis sapien.”</p>&ndash;&gt;&ndash;&gt;-->
										<!--&lt;!&ndash;&lt;!&ndash;<label>Adrian - Hover Agency</label>&ndash;&gt;&ndash;&gt;-->
									<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
								<!--&lt;!&ndash;&lt;!&ndash;<div class="clearfix"></div>&ndash;&gt;&ndash;&gt;-->
							<!--&lt;!&ndash;&lt;!&ndash;</div>&ndash;&gt;&ndash;&gt;-->
						<!--&lt;!&ndash;&lt;!&ndash;</li>&ndash;&gt;&ndash;&gt;-->
					<!--&lt;!&ndash;</ul>&ndash;&gt;-->
			    <!--&lt;!&ndash;</div>&ndash;&gt;-->
			  <!--&lt;!&ndash;<div class="clearfix"> </div>&ndash;&gt;-->
			<!--&lt;!&ndash;</div>&ndash;&gt;-->
		<!--&lt;!&ndash;</div>&ndash;&gt;-->
	<!--</div>-->
	<!--end-partner-->
	<!--Slider-Starts-Here-->

			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider5").responsiveSlides({
			        auto: true,
			        pager: false,
			        nav: true,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });

			    });
			  </script>
			<!--End-slider-script-->
	<!--start-project-->
	<div class="project">
		<div class="container">
			<div class="project-top">
				<h3>我们的产品</h3>
			</div>
			<div class="project-bottom">
				<div class="portfolios entertain_box  wow fadeInUp" data-wow-delay="0.4s" id="portfolio">
					<div class="portfolio-top">
						<!--<ul id="filters" class="clearfix">-->
							<!--<li><span class="filter active" data-filter="app card icon logo web photo">ALL</span></li>-->
							<!--<li><span class="filter" data-filter="app">WEB</span></li>-->
							<!--<li><span class="filter" data-filter="photo">APP</span></li>-->
							<!--<li><span class="filter" data-filter="card photo">LOGO</span></li>-->
							<!--<li><span class="filter" data-filter="icon card">CODE</span></li>-->
						<!--</ul>-->
						<!--<ul id="filters" class="clearfix">-->
							<!--<li><span class="filter active" data-filter="{$cat_name}">ALL</span></li>-->
							<!--<foreach name="cat" item="vo">-->
							<!--<li><span class="filter" data-filter="{$vo.name}">{$vo.name}</span></li>-->
							<!--</foreach>-->
							<!--&lt;!&ndash;<li><span class="filter" data-filter="1">WEB</span></li>&ndash;&gt;-->
							<!--&lt;!&ndash;<li><span class="filter" data-filter="2">APP</span></li>&ndash;&gt;-->
							<!--&lt;!&ndash;<li><span class="filter" data-filter="3">LOGO</span></li>&ndash;&gt;-->
							<!--&lt;!&ndash;<li><span class="filter" data-filter="4">CODE</span></li>&ndash;&gt;-->
						<!--</ul>-->

					<div id="portfoliolist">
						<foreach name="projects" item="vo">
						<div class="portfolio {$vo.name} mix_all" data-cat="{$vo.name}" style="display: inline-block; opacity: 1;">
							<div class="portfolio-wrapper">
								<a href="{:sp_get_image_preview_url($vo['img'])}" class="b-link-stripe b-animate-go   swipebox"  title="{$vo.title}">
							     <img src="{:sp_get_image_preview_url($vo['img'])}" /><div class="b-wrapper"><h2 class="b-animate b-from-left    b-delay03 ">{$vo.text}</h2>
							  	 </div></a>
			                </div>
						</div>
						</foreach>
					</div>
				</div>
			   </div>
			</div>
		</div>
	</div>
	<!--end-project-->


	    <script type="text/javascript">
			jQuery(function($) {
				$(".swipebox").swipebox();
			});
		</script>
	<!-- Portfolio Ends Here -->

<script type="text/javascript">
$(function () {

	var filterList = {

		init: function () {

			// MixItUp plugin
		// http://mixitup.io
		$('#portfoliolist').mixitup({
			targetSelector: '.portfolio',
			filterSelector: '.filter',
			effects: ['fade'],
			easing: 'snap',
			// call the hover effect
			onMixEnd: filterList.hoverEffect()
		});

	},

	hoverEffect: function () {

		// Simple parallax effect
		$('#portfoliolist .portfolio').hover(
			function () {
				$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
				$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');
			},
			function () {
				$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
				$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');
			}
		);

	}

};

// Run the show!
	filterList.init();

});
</script>
	<!--start-footer-->
<tc_include file="Public:footer" />
	<!--end-footer-->
</body>
</html>